<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="pics/homescreen.gif" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<title>iWebKit Demo - An iPhone generated transparent top bar.
</title>
<link href="pics/startup.png" rel="apple-touch-startup-image" />
<meta content="iPod,iPhone,Webkit,iWebkit,Website,Create,mobile,Tutorial,free" name="keywords" />
<meta content="Instead of having an image iWebKit now uses generated gradients, this transparent black topbar has been made that way!" name="description" />
</head>

<body>

<div id="topbar" class="transparent">
	<div id="leftnav">
		<a href="index.html"><img alt="home" src="images/home.png" /></a>
		<a href="black.html">Black topbar</a> </div>
	<div id="rightnav">
		<a href="form.html">Form Elements</a> </div>
</div>
<div id="tributton">
	<div class="links">
		<a href="navigation.html">trio buttons</a><a href="black.html">black 
		topbar</a><a id="pressed" href="">transparent</a></div>
</div>
<div id="content">
	<span class="graytitle">Navigation</span>
	<ul class="pageitem">
		<li class="textbox"><span class="header">The transparent topbar</span><p>
		As with the Black topbar you can simply make it transparent by simply 
		adding a class to it. This style emulates that of the photos app and is 
		epecially nice on sites with a custom background image.</p>
		<span class="header">Navigation arrows</span><p>Also available are the 
		well known navigation arrows that you see above. I have decided to give 
		you the option of simply having 1 button at the top or using a 
		&quot;breadcrumb&quot; system with wich you can have multiple left or right arrows 
		on the same page. This is of course for the ease of use of your site 
		enabling the user to naviagte quickly.
		</p>
		</li>
	</ul>
</div>
<div id="footer">
	<!-- Support iWebKit by sending us traffic; please keep this footer on your page, consider it a thank you for my work :-) -->
	<a class="noeffect" href="http://snippetspace.com">iPhone site powered by iWebKit</a></div>

</body>

</html>
